{% extends 'base_children.html' %}
{% block self_head %}

 <link  rel="stylesheet" href="/static/larryms/thirdlib/formSelects-v4.css" >
{#<script src="/static/larryms/plus/ace-1.4.2/src-min-noconflict/ace.js"></script>#}
{#    <script src="/static/larryms/plus/ace-1.4.2/src-min-noconflict/ext-language_tools.js"></script>#}
{#   <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/mode-mysql.js"></script>#}
{#    <script src="/static/larryms/plus/ace-1.4.2/src-min-noconflict/mode-python.js"></script>#}
{#    <script src="/static/larryms/plus/ace-1.4.2/src-min-noconflict/mode-sql.js"></script>#}
{#    <script src="/static/larryms/plus/ace-1.4.2/src-min-noconflict/mode-yaml.js"></script>#}
{#    <script src="/static/larryms/plus/ace-1.4.2/src-min-noconflict/mode-sh.js"></script>#}
{##}
{##}
{#    <script src="/static/larryms/plus/ace-1.4.2/src-min-noconflict/theme-monokai.js"></script>#}



<style type="text/css">
	#editor {
		/* position: absolute; */
	width: 100%;
	height: 400px;

   }	
</style>
{% endblock %}
{% block content %}
<div class="layui-fluid form-demo-box">



<div class="layui-row">
    <div class="layui-col-lg6">

           <form class="layui-form layui-form-pane" id="ansiblescriptRun" lay-filter="layui-form" action="{% url 'ansible_transfile' %}">
                                      {% csrf_token %}
                       <div class="layui-form-item">
                                            <label class="layui-form-label">作业名称</label>
                                             <div class="layui-input-block">
                                                 <input  name="job_name" class="layui-input" value="快速分发文件_{{ time_now }}" required>
                                             </div>


                 </div>
  <input  type="hidden"   class="form-control" id="ans_uuid" name="ans_uuid" value="{{ans_uuid}}">
             <section>
                 <div class="layui-card" >
                     <div class="layui-card-header">
                         <div class="layui-form-inline">
                              <strong> 源文件</strong>

                         </div>

                     </div>
                     <div class="layui-card-body"  >
                            <div class="layui-form-item">
                                            <label class="layui-form-label">源文件/目录</label>
                                            <div class="layui-input-block">
                                                <input class="layui-input" name="source_file" id="script_args"  value="/data/soft/file.zip or tgz or tar.gz" placeholder="" layui-required>
                                            </div>

                         </div>
                                      <div class="layui-form-item">
                                        <label class="layui-form-label">文件源机器</label>
                                        <div class="layui-input-block">

                                           <input class="layui-input" name="source_host" placeholder="请输入IP 地址" lay-verify="required">

                                        </div>
                                    </div>
                     </div>
                 </div>

             </section>
        <br>
            <section>

                 <div class="layui-card">
                     <div class="layui-card-header">
                           <strong>目标文件</strong>
                     </div>
                     <div class="layui-card-body" style="height: 500px;">



                         <div class="layui-form-item">
                                            <label class="layui-form-label">目标路径</label>
                                            <div class="layui-input-inline">
                                                <input class="layui-input" name="dest_file" id="script_args"  value="/tmp/soft/" placeholder="" layui-verefy="required">
                                            </div>

                         </div>

                             <div class="layui-form-item">
                                        <label class="layui-form-label">产品线</label>
                                        <div class="layui-input-block">
                                            <select name="prod_line" xm-select='prod_line'  xm-select-radio>
                                                    <option value="">联动多选</option>
                                            </select>
{#                                             <input type="text" id="yewuxian" class="layu=3i-input" readonly="readonly">#}
                                        </div>
                             </div>
                         <div class="layui-form-item">
                                        <label class="layui-form-label">目标机器</label>
                                        <div class="layui-input-block">
                                            <select name='dest_hosts' id="select_host" xm-select='select_host'  xm-select-max="3" layui-verefy="required">
                                                    <option value="">选择一个服务器</option>
                                            </select>

                                        </div>
                                    </div>

                             <button type="button" class="layui-btn layui-btn-green" lay-submit="" lay-filter='runjob' id="run_ansible_model">开始执行</button>


                         <p>数据源服务器必须是一个，而且本平台可以远程登陆</p>
                         <p>数据源文件，可以是目录或者文件，但必须是一个</p>
                         <p>目标目录或者文件，必须是一个</p>
                          <p>目标主机，可以选择多个，而且本平台可以远程登陆</p>

                     </div>



                     </div>

             </section>
                 </form>
    </div>

    <div class="layui-col-lg6">

              <section>
                     <div class="layui-card">
                            <div class="layui-card-header">

                                <strong>执行结果</strong>

                            </div>
                            <div class="layui-card-body layui-bg-black">

                                <div class="html">
                                    <div id="result">
                                    </div>
                                </div>
                            </div>

                        </div>
            </section>
    </div>
</div>



</div>




{% endblock %}
{% block self_foot %}

    <script type="text/javascript">
        layui.config({
            version: "2.0.8",
            base: '/static/larryms/',
            layertype:2
        }).extend({
            larry: 'js/base'
        }).use(['larry', 'layer', 'jquery', 'larryms', 'form','formSelects','upload'], function () {
            var $ = layui.$,
                larry = layui.larry,
                form = layui.form,
                layer = layui.layer,
                formSelects = layui.formSelects,
                upload=layui.upload,
                larryms = layui.larryms;

            {#var curIfr = parent.layer.getFrameIndex(window.name);#}



            form.on('submit(runjob)', function (data) {
                console.log(data.field)
                console.log(data)
                var btnObj = $(data.elem);
                {#btnObj.attr('disabled', true);#}

                 $.ajax({
                    dataType: "text",
                    url: '{% url 'ansible_transfile' %}', //请求地址
                    type: "POST",  //提交类似
                      {#contentType: "application/json",#}
                    data: data.field,  //提交参数
                    success: function (res) {
                        res2=JSON.parse(res);
                            console.log(res);
                           if (res2.code == 200) {
                            clearInterval(interval);
                            larryms.msg(res2.msg );
                        };
                        if( res2["code"] === 500){
                             larryms.msg(res2.msg );
                        }

                    },
                    error: function (response) {
                        larryms.msg("运行失败,时间超时了" );
                        clearInterval(interval);
                    }
                });


                $("#result").html("服务器正在处理，请稍等。。。");
                /* 轮训获取结果 开始  */
                var interval = setInterval(function () {
                    $.ajax({
                        url: '{% url 'get_ans_run_result' %}',
                        type: 'post',
                        data: data.field,
                        success: function (result) {
                            if (result["msg"] !== null) {
                                $("#result").append("<p>" + result["msg"] + "</p>");
                                {#document.getElementById("scrollToTop").scrollIntoView();#}
                                if (result["msg"].indexOf("[Done]") == 0) {
                                    clearInterval(interval);
                                    larryms.msg("Ansible执行完成");
                                    btnObj.removeAttr('disabled');
                                }
                            }
                        },
                        error: function (response) {
                            btnObj.removeAttr('disabled');
                            clearInterval(interval);
                        }
                    });
                }, 50);  //一秒钟运行2此


            });

            formSelects.config('prod_line', {
    type: 'get',                //ÇëÇó·½Ê½: post, get, put, delete...
    header: {},                 //×Ô¶¨ÒåÇëÇóÍ·
    data: {},                   //×Ô¶¨Òå³ýËÑË÷ÄÚÈÝÍâµÄÆäËûÊý¾Ý
    searchUrl: '{% url 'get_json_tree' %}',
    searchName: 'keyword',      //×Ô¶¨ÒåËÑË÷ÄÚÈÝµÄkeyÖµ
    searchVal: '',              //×Ô¶¨ÒåËÑË÷ÄÚÈÝ, ËÑËØÒ»´ÎºóÊ§Ð§, ÓÅÏÈ¼¶¸ßÓÚËÑË÷¿òÖÐµÄÖµ
    keyName: 'name',            //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐnameµÄkey, Ä¬ÈÏ name
    keyVal: 'value',            //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐvalueµÄkey, Ä¬ÈÏ value
    keySel: 'selected',         //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐselectedµÄkey, Ä¬ÈÏ selected
    keyDis: 'disabled',         //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐdisabledµÄkey, Ä¬ÈÏ disabled
    keyChildren: 'children',    //Áª¶¯¶àÑ¡×Ô¶¨Òåchildren
    delay: 500,                 //ËÑË÷ÑÓ³ÙÊ±¼ä, Ä¬ÈÏÍ£Ö¹ÊäÈë500msºó¿ªÊ¼ËÑË÷
    direction: 'down',          //¶àÑ¡ÏÂÀ­·½Ïò, auto|up|down
    response: {
        statusCode: 0,          //³É¹¦×´Ì¬Âë
        statusName: 'code',     //code key
        msgName: 'msg',         //msg key
        dataName: 'data'        //data key
    },
    success: function(id, url, searchVal, result){      //Ê¹ÓÃÔ¶³Ì·½Ê½µÄsuccess»Øµ÷
        console.log(id);        //×é¼þID xm-select
        console.log(url);       //URL
        console.log(searchVal); //ËÑË÷µÄvalue
        console.log(result);    //·µ»ØµÄ½á¹û
    },
    error: function(id, url, searchVal, err){           //Ê¹ÓÃÔ¶³Ì·½Ê½µÄerror»Øµ÷
        //
        console.log(err);   //err¶ÔÏó
    },
    beforeSuccess: function(id, url, searchVal, result){

        result.data=JSON.parse(result.data)
        return result;  //±ØÐëreturnÒ»¸ö½á¹û, Õâ¸ö½á¹ûÒª·ûºÏ¶ÔÓ¦µÄÊý¾Ý½á¹¹
    },
    beforeSearch: function(id, url, searchVal){         //ËÑË÷Ç°µ÷ÓÃ´Ë·½·¨, return true½«´¥·¢ËÑË÷, ·ñÔò²»´¥·¢
        if(!searchVal){//Èç¹ûËÑË÷ÄÚÈÝÎª¿Õ,¾Í²»´¥·¢ËÑË÷
            return false;
        }
        return true;
    },
    clearInput: false,          //µ±ÓÐËÑË÷ÄÚÈÝÊ±,  µã»÷Ñ¡ÏîÊÇ·ñÇå¿ÕËÑË÷ÄÚÈÝ, Ä¬ÈÏ²»Çå¿Õ
   }, true);
            formSelects.data('prod_line','server',{
                url: '{% url 'get_json_tree' %}',

                 linkage: true,
                linkageWidth:130,
                 keyChildren: 'children',
                keyName: 'name',
                keyVal: 'value',
                 success: function(result){
						        console.log(result);
						    },
                 error: function(err){           //Ê¹ÓÃÔ¶³Ì·½Ê½µÄerror»Øµ÷
						        //Í¬ÉÏ
						        console.log(err);   //err¶ÔÏó
						    },


            });

          formSelects.on('prod_line', function(id, vals, val, isAdd, isDisabled){
              var hostids='';
              for(var i in vals)
              {
                  var  hostname=vals[i].name.split('/').pop();
                  var hostid=vals[i].value.split('/').pop();
                  if (hostname ==='host')
                  {
	   $('#select_host option:selected').empty();

		   if ( hostid > 0){

  formSelects.config('select_host', {
    type: 'get',                //ÇëÇó·½Ê½: post, get, put, delete...
    header: {},                 //×Ô¶¨ÒåÇëÇóÍ·
    data: {},                   //×Ô¶¨Òå³ýËÑË÷ÄÚÈÝÍâµÄÆäËûÊý¾Ý
    searchUrl: '',           //ËÑË÷µØÖ·, Ä¬ÈÏÊ¹ÓÃxm-select-searchµÄÖµ, ´Ë²ÎÊýÓÅÏÈ¼¶¸ß
    searchName: 'keyword',      //×Ô¶¨ÒåËÑË÷ÄÚÈÝµÄkeyÖµ
    searchVal: '',              //×Ô¶¨ÒåËÑË÷ÄÚÈÝ, ËÑËØÒ»´ÎºóÊ§Ð§, ÓÅÏÈ¼¶¸ßÓÚËÑË÷¿òÖÐµÄÖµ
    keyName: 'name',            //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐnameµÄkey, Ä¬ÈÏ name
    keyVal: 'value',            //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐvalueµÄkey, Ä¬ÈÏ value
    keySel: 'selected',         //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐselectedµÄkey, Ä¬ÈÏ selected
    keyDis: 'disabled',         //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐdisabledµÄkey, Ä¬ÈÏ disabled

    delay: 500,                 //ËÑË÷ÑÓ³ÙÊ±¼ä, Ä¬ÈÏÍ£Ö¹ÊäÈë500msºó¿ªÊ¼ËÑË÷
    direction: 'auto',          //¶àÑ¡ÏÂÀ­·½Ïò, auto|up|down
    response: {
        statusCode: 0,          //³É¹¦×´Ì¬Âë
        statusName: 'code',     //code key
        msgName: 'msg',         //msg key
        dataName: 'data'        //data key
    },
    success: function(id, url, searchVal, result){      //Ê¹ÓÃÔ¶³Ì·½Ê½µÄsuccess»Øµ÷
        console.log(id);        //×é¼þID xm-select
        console.log(url);       //URL
        console.log(searchVal); //ËÑË÷µÄvalue
        console.log(result);    //·µ»ØµÄ½á¹û
    },
    error: function(id, url, searchVal, err){           //Ê¹ÓÃÔ¶³Ì·½Ê½µÄerror»Øµ÷
        //
        console.log(err);   //err¶ÔÏó
    },
    beforeSuccess: function(id, url, searchVal, result){

        result.data=JSON.parse(result.data)
        return result;  //±ØÐëreturnÒ»¸ö½á¹û, Õâ¸ö½á¹ûÒª·ûºÏ¶ÔÓ¦µÄÊý¾Ý½á¹¹
    },
    beforeSearch: function(id, url, searchVal){         //ËÑË÷Ç°µ÷ÓÃ´Ë·½·¨, return true½«´¥·¢ËÑË÷, ·ñÔò²»´¥·¢
        if(!searchVal){//Èç¹ûËÑË÷ÄÚÈÝÎª¿Õ,¾Í²»´¥·¢ËÑË÷
            return false;
        }
        return true;
    },
    clearInput: false,          //µ±ÓÐËÑË÷ÄÚÈÝÊ±, µã»÷Ñ¡ÏîÊÇ·ñÇå¿ÕËÑË÷ÄÚÈÝ, Ä¬ÈÏ²»Çå¿Õ
}, true);
				formSelects.data('select_host', 'server', {
    url: '/cmdb/get_json_tree_host/'+ hostid ,

});
		   };

                  }
                  else{
                      larryms.alert('最后的节点要是host，才能选出主机奥');
                      formSelects.value('prod_line',[vals[i].value],false) ;//删掉这个值
                  }
                  console.log(hostname);
                  console.log(hostid)

              };
        }, true);


        });


    </script>
{%endblock %}